﻿body {
    display:flex;
    flex-direction:column;
    background-color:#e62626;
}
.footer
{
    height:100px;
    background-color:#e62626;
    display:flex;
    justify -content:center;
    align -items:center; 
    text-align:center;  
}
.header {
   height:50px;
   background-color:#e68a8a;
   border-radius:3px;
   border:solid;
   border-color:black;
   display:flex;
   justify-content:center;
   align-items:center;
   margin-top:30px;
}
    .header .time {
        flex:1;
    }
    .header .welcome {
        width:390px;
    }
    .header .backspace {
        flex:1;
    }
.content .logo {

    width:300px;
    margin:auto;
    position:absolute;
}
.content {
    height:600px;
    background-color:#eb2b2b;
    display:flex;
    margin-top:45px;
}
    .content .MenuAdd {
        background-color:#e68a8a;
        width:500px;
        border-radius:5px;
        border-color:black;
        border:solid;
    }
    .content .MenuSelect {
        flex:1;
        background-color:#b11111;
        margin-left:10px;
        border-radius:5px;
        border-color:black;
        border:solid;
    }
.btnBackspace {
    background:none;
    color:#eb2b2b;
    font-size:20px;
    font-weight:bold;
    border:none;
}
    .btnBackspace:hover {
        color:white;
        font-size:22px;
    }
.btnAdd {
    background-color:#f00;
    width:150px;
    height:30px;
    color:white;
    border:none;
    border-radius:5px;
    font-size:20px;
    font-weight:bold;
}
    .btnAdd:hover {
       background-color:#fc9f9f;
       color:#a11f1f;
    }
.btnReset {
    background-color:#b11111;
    width:150px;
    height:30px;
    color:black;
    border:none;
    border-radius:5px;
    font-size:20px;
    font-weight:bold;
}
    .btnReset:hover {
    background-color:#fc9f9f;
    color:#a11f1f;
    }
.tbAdd {
    height:550px;
    margin-left:60px;
    margin-top:10px;
    font-size:17px;
    font-weight:bold;
}
.btnSelect {
    height:30px;
    width:150px;
    color:white;
    font-size:20px;
    background-color:#f00;
    border:none;
    margin-left:30px;
    border-radius:5px;
}
    .btnSelect:hover {
    background-color:#fc9f9f;
    color:#a11f1f;
    }
.txtName {
    background-color:#e68a8a;
    width:500px;
    margin-left:10px;
    height:30px;
    border:none;
    border-radius:5px;
}
.font {
    font-size:20px;
    color:#f08484;
    margin-left:15px;
    font-weight:bold;
}
.select {
    margin-top:10px;
    margin-left:10px;
}
.tbSelect {
    height:500px;
    width:850px;
    text-align:center;
    background-color:#f00;
    margin-left:45px;
    margin-top:20px;
    border:solid;
    border-color:white;
    border-collapse:collapse;
    color:white;
}
    .tbSelect td, tr {
    border:solid;
    border-color:white;
    }
.btnUpdate {
    width:60px;
    height:30px;
    border:none;
    border-radius:5px;
    background-color:#b11111;
    font-size:20px;
    font-weight:bold;
}
    .btnUpdate:hover {
    background-color:#fc9f9f;
    color:#a11f1f;
    }
.btnDelete {
    width:60px;
    height:30px;
    border:none;
    border-radius:5px;
    background-color:black;
    color:white;
    font-size:20px;
    font-weight:bold;
}
    .btnDelete:hover {
    background-color:#fc9f9f;
    color:#a11f1f;
    }
.aAdd {
    background-color:#f62525;
    margin:1px;
    border:solid #fc9f9f;
    width:32px;
    height:100px;
    text-decoration:none;
    font-family:KaiTi;
    font-size:19px;
}
    .aAdd:hover {
        color:white;
    background-color:#b11111;
    width:50px;
    }
.aAdd1 {
    background-color:#f62525;
    margin:1px;
    border:solid #fc9f9f;
    width:32px;
    height:100px;
    border-top-right-radius:10px;
    font-size:19px;
    font-weight:bold;
    text-align:center;
    font-family:KaiTi;
}
    .aAdd1:hover {
        color:white;
        background-color:#b11111;
        width:50px;
    }
.MenuList {
    margin-right:-10px;
    position:absolute;
    width:20px;
}
.aSelect {
    background-color:#f62525;
    margin:1px;
    border:solid #fc9f9f;
    width:200px;
    height:50px;
    text-decoration:none;
    font-family:KaiTi;
    font-size:19px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
    .aSelect:hover {
        color:white;
    background-color:#b11111;
    height:60px;
    }
.aSelect1 {
    background-color:#f62525;
    margin:1px;
    border:solid #fc9f9f;
    width:200px;
    height:50px;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    font-size:19px;
    font-weight:bold;
    text-align:center;
    font-family:KaiTi;
}
    .aSelect1:hover {
        color:white;
        background-color:#b11111;
        height:60px;
    }
.SelectList {
    margin-top:-50px;
    position:absolute;
}